// 1、引入vue
import  Vue from 'vue'


//2、引入vue X
import VueX from "vuex";
//获取电影列表请求
import axios from "axios";

//3、使用vuxt:1
Vue.use(VueX)

//可以单独创建vux里的state数据
const state = {
    count:1,
    name:['小王','小李'],
    movieList:[]
}

//创建  一个mutation属性
const mutations ={
    // 只有这里的事件函数可以修改State中的状态,第一个参数时State,第二个参数是传递的值,多值写成对象形式
    increment(state){
        state.count++
    },
    //这边接收调用函数传递过来的对象,这里解构出N
    incrementN(state,{ n }){
        state.count+= n
    },

    //异步请求的电影数据,这里获取并设置给movieList
    getMovieList(state, movieList){
        state.movieList = movieList
    }
}

//可以操作任意的异步操作,用来代替mutations处理异步操作
const actions={
    // actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
    incrementWait({commit}){
        setTimeout(() => {
            commit('increment')
        }, 1000);
    },
    //第二个参数是传过来的数据,payload是穿过来的数据,在mutation中会解构
    incrementNWait({commit},payload){
        setTimeout(() => {
            commit('incrementN',payload)
        }, 1000);
    },

    async getMovieList({commit}){
        const re =await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")
        commit('getMovieList',re.data.data.list)
    }
}

//vueX中的计算属性getters
const getters={
    //没有传参时的写法
    likeMovieList(state){
        return state.movieList.filter((item)=>{
             return item.albumName.length >=2 && item.albumName.length <=3
        })
    },

    //如果有传参的时候,函数里要返回一个函数
    yourMovieList(state){
        //参数在当前传递一个长度最小值和长度最大值
        return ({start,end})=>{
            return state.movieList.filter((item)=>{
                return item.albumName.length >=start && item.albumName.length <=end
           })
        }
    }
}


//创建vuex的实例并暴露
export default new VueX.Store({
    state,
    mutations,
    actions,
    getters
})

//https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a